
// 轮播图 方法一
// 左右按钮切换，圆点点击切换图片
var person = ["../img/i5.jpg", "../img/i6.webp", "../img/i7.webp", "../img/i8.webp", "../img/i9.webp", "../img/i10.webp"]
var current_index = 0
function next(type) {
    if (type == 1) {
        current_index++
        if (current_index == person.length) {
            current_index = 0     //如果变量大于图片的长度，复原为0
        }
    }
    if (type == 2) {
        current_index--
        if (current_index == -1) {
            current_index = person.length - 1  //如果变量小于0，复原最后一张
        }
    }
    document.querySelector(".banner-home img").src = "../img/" + person[current_index]  //获取图片
    curr_el = document.querySelectorAll(".slide-pagination .jump li")[current_index] //页面中找到所有按钮和轮播图片连一起
    jump_banner_img(current_index, curr_el)    //圆点与轮播图片连在一起
}

//自动轮播定时器
var a;   //设置一个全局变量，定时器
function autoPlay() {
    a = setInterval(() => {
        next(1)
    }, 5000)
}
autoPlay()
//鼠标移入移出
banner_box = document.querySelector(".banner-box")
banner_box.onmouseover = function () {
    console.log("onmouseover")
    clearInterval(a)
}
banner_box.onmouseout = function () {
    console.log("onmouseout", a)
    autoPlay()
}

//把所有元素的样式都清除掉，给当前元素加样式
function jump_banner_img(img_index, curr_el) {
    banner_all = document.querySelectorAll(".slide-pagination .jump li ")
    for (i = 0; i < banner_all.length; i++) {
        banner_all[i].classList.remove("active")
    }
    banner_jump = curr_el.classList.add("active")
    current_index = img_index
    document.querySelector(".banner-home img").src = "../img/" + person[current_index]
}





var cureent_img_index = 0;
setInterval(function () {
    var imgels = document.querySelectorAll("[id^='sites-links-active-img-']");
    imgels[cureent_img_index].classList.add("maxlay");

    var sibels = getAllSiblings(imgels[cureent_img_index])
    for (var j = 0; j < sibels.length; j++) {
        sibels[j].classList.remove("maxlay");
    }
    cureent_img_index++;
    if (cureent_img_index >= document.querySelectorAll("[id^='sites-links-active-img-']").length) {
        cureent_img_index = 0
    }
}, 1000)

//选择页面上所有需要切换效果的文字
var els = document.querySelectorAll("[id^='more-']")
els = Array.from(els)
//由于页面元素规律的问题（切换文字和显示商品的元素规律都是以指定的字符开头，所以需要过滤掉切换文字之外的元素）
els = els.filter(function (el) {
    return !el.getAttribute("id").endsWith("-div")
})

for (var i = 0; i < els.length; i++) {
    els[i].onmouseover = function () {
        flushSibs(this)
        var eid = this.getAttribute("id")
        document.querySelector("#" + eid + "-div").classList.add("maxlay");
    }
    els[i].onmouseout = function () {
        flushSibs(this)
    }
}

//还缺一个清楚切换效果的方法

//清除所有兄弟元素的图层显示效果
function flushSibs(el) {
    var eid = el.getAttribute("id")
    var changel = document.querySelector("#" + eid + "-div");
    var sibels = getAllSiblings(changel)
    for (var j = 0; j < sibels.length; j++) {
        sibels[j].classList.remove("maxlay");
    }
}

//获取当前元素的所有兄弟元素
function getAllSiblings(element) {
    var siblings = Array.from(element.parentNode.children);
    siblings = siblings.filter(function (sibling) {
        return sibling !== element;
    });
    return siblings;
}